<template>
	<el-dialog
		:visible="true"
		width="80%"
		:destroy-on-close="true"
		class="rempadding"
		:before-close="handleClose"
	>
		<!-- <div slot="title" class="dialog-title">
			<span class="title-text" style="margin-right: 15px">
				{{ rowVal.userName }}
			</span>
		</div> -->
		<el-table
			v-loading="loading"
			size="mini"
			border
			:data="tableData"
			class="small-size-table"
			style="margin-bottom: 15px"
			:header-cell-style="getRowClass"
			element-loading-spinner="el-icon-loading"
			:default-sort="{ prop: 'rebateDistribution', order: 'descending' }"
			@sort-change="changeTableSort"
			highlight-current-row
		>
			<el-table-column
				prop="proxyAccount"
				align="center"
				:label="$t('common.agent_number')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.proxyAccount || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="proxyTypeCaption"
				align="center"
				:label="$t('agent.agent_type')"
				width="180"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span>
						{{
							typeFilter(
								scope.row.proxyTypeCaption,
								'proxyRebateAccountType'
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="proxyLevelCaption"
				align="center"
				sortable
				:label="$t('funds.fund_audit.proxy_level_name')"
				width="120"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.proxyLevelCaption || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="distributeOfRebate"
				align="center"
				sortable
				:label="$t('report.rebate_distribution')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p>
						{{
							handleTotalNumber(
								'USDT',
								scope.row.distributeOfRebate
							)
						}}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="adjustOfRebate"
				align="center"
				sortable
				:label="$t('report.rebate_adjustment')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p :style="handleNumberColor(scope.row.adjustOfRebate)">
						{{
							handleTotalNumber('USDT', scope.row.adjustOfRebate)
						}}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="realOfRebate"
				align="center"
				sortable
				:label="$t('report.actual_rebate')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p :style="handleNumberColor(scope.row.realOfRebate)">
						{{ handleTotalNumber('USDT', scope.row.realOfRebate) }}
					</p>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			v-show="!!total"
			class="text-right"
			:current-page.sync="pageNum"
			background
			layout="total, sizes,prev, pager, next, jumper"
			:page-size.sync="pageSize"
			:page-sizes="pageSizes"
			:total="total"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
		<div slot="footer" class="dialog-footer" style="text-align: center">
			<el-button type="primary" @click="handleClose">关闭</el-button>
		</div>
	</el-dialog>
</template>
<script>
import list from '@/mixins/list'
import summaryList from './summaryList'
export default {
	mixins: [list, summaryList],
	props: {
		rowVal: {
			type: Object,
			default: () => {}
		},
		closeDialog: {
			type: Function,
			default: () => {}
		}
	},
	data() {
		return {
			loading: false,
			tableData: [],
			subSummary: {}
		}
	},
	methods: {
		loadData() {
			this.loading = true
			this.rowVal.pageNum = this.pageNum
			this.rowVal.pageSize = this.pageSize
			this.$api
				.getReportPreviousRebateDetailList(this.rowVal)
				.then((res) => {
					this.loading = false
					if (res.code === 200) {
						this.tableData = []
						this.tableData = res?.data?.record || []
						this.subSummary = res?.data?.summary || {}
						this.total = res?.data?.totalRecord || 0
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleClose() {
			this.closeDialog(false)
		},
		changeTableSort({ column, prop, order }) {
			this.rowVal.orderKey = prop
			if (order === 'ascending') {
				// 升序
				this.rowVal.orderType = 'asc'
			} else if (column.order === 'descending') {
				// 降序
				this.rowVal.orderType = 'desc'
			} else {
				delete this.rowVal.orderKey
				delete this.rowVal.orderType
			}
			this.loadData()
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-table__footer-wrapper .cell {
	display: flex;
	justify-content: center;
	align-items: center;
}
::v-deep .el-table__body-wrapper {
	overflow-y: auto;
	max-height: 45vh;
}
</style>
